<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .mi-box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
        }

        .circle {
            border-radius: 50%;
        }

        .textB{
            font-size: 60px;
        }
    </style>
</head>
<body>
<div id="app">
<div>class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
    Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。</div>
    <h2>
        注意，v-bind中绑定的是json，但是貌似支持的不太好。
        <br>v-bind:class="{circle:showCircle,'mi-box':true,'textB':true}</br>
        第一个可以不写单/双引号。。。余下必须写。否则所有都不生效，界面空白。

    </h2>

    <p></p>
    <div v-bind:class='{circle:showCircle,"mi-box":true,"textB":false}'>
        吾皇万岁万岁万万岁
    </div>

</div>

<script>
    var v = new Vue({
        el: '#app',
        data: {
            showCircle: true,
        },
        mounted: function () {
            var that = this;
            setTimeout(function () {
                that.showCircle = false;
            }, 1000);

        },
    })


</script>

</body>
</html>